<template>
  <div class="mod-seckill-shopAuditing">
    <div class="search-bar">
      <el-form
        @submit.native.prevent
        :inline="true"
        ref="searchForm"
        :model="searchForm"
        size="small"
      >
        <div class="input-row margin-bottom-none">
          <el-form-item
            prop="shopName"
            label="门店名称："
          >
            <el-input
              v-model="searchForm.shopName"
              size="small"
              :placeholder="$t('outlet.outletName')"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="brandName"
            :label="$t('coupon.brandName') + '：'"
          >
            <el-input
              v-model="searchForm.brandName"
              size="small"
              :placeholder="$t('brand.pleaseEnterBrandName')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('outlet.brandTagId') + ':'">
            <!-- <el-input
              v-model="searchForm.brandTagName"
              size="small"
              :placeholder="$t('tip.input')"
            ></el-input> -->

            <el-select
              clearable
              filterable
              v-model="searchForm.brandTagName"
              :placeholder="$t('tip.select')"
            >
              <el-option
                v-for="item in allBrandList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item :label="$t('distributionMsg.auditStatus') + ':'">
            <el-select
              clearable
              v-model="searchForm.auditStatus"
              :placeholder="$t('distributionMsg.auditStatus')"
            >
              <el-option
                :label="$t('product.pendingReview')"
                :value="0"
              ></el-option>
              <el-option
                :label="$t('productComm.pass')"
                :value="1"
              ></el-option>
              <el-option
                :label="$t('shopProcess.reject')"
                :value="2"
              ></el-option>

            </el-select>
          </el-form-item>

          <el-form-item :label="$t('brand.applicationTime') + ':'">
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
              @change="changeDateRange"
              :range-separator="$t('date.tip')"
              value-format="yyyy-MM-dd HH:mm:ss"
              :start-placeholder="$t('date.start')"
              :end-placeholder="$t('date.end')"
            ></el-date-picker>
          </el-form-item>
          <div
            class="default-btn primary-btn"
            @click="searchChange(true)"
          >{{$t('product.search')}}</div>
          <div
            class="default-btn"
            @click="resetSearchForm('searchForm')"
          >{{$t('product.reset')}}</div>
        </div>
      </el-form>
    </div>
    <div class="main-container">
      <div class="table-con audit-shop-table">
        <el-table
          :key="tabValue"
          ref="auditShop"
          :data="dataList"
          header-cell-class-name="table-header"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            :label="$t('formData.serialNumber')"
            type="index"
            width="50"
          >
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            :label="$t('outlet.shopLogo')"
            width="auto"
          >
            <template slot-scope="scope">
              <img
                :src="getImgSrc(scope.row.shopDetail.shopLogo)"
                :alt="scope.row.shopDetail.prodName"
                style="width: 60px; height: 60px"
                @error="handlePicError"
              />
            </template>
          </el-table-column>

          <el-table-column
            prop="shopName"
            :label="$t('outlet.outletName')"
          >
            <template slot-scope="scope">
              <span class="table-cell-text">{{ scope.row.shopDetail.shopName }}</span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="brandTagName"
            :label="$t('outlet.brandTagId')"
            width="auto"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.shopDetail.brandTagName }}
              </div>
            </template>
            <!-- <template slot-scope="scope">
              <img
                :src="getImgSrc(scope.row.brandTagName)"
                :alt="scope.row.prodName"
                style="width: 60px; height: 60px"
                @error="handlePicError"
              />
            </template> -->
          </el-table-column>

          <!-- <el-table-column
            prop="shopLogo"
            :label="$t('brand.brandLogo')"
          >
            <template slot-scope="scope">
              <div class="table-cell-image">
                <img :src="getImgSrc(scope.row.shopLogo)" @error="handlePicError">
              </div>
            </template>
          </el-table-column> -->

          <!-- <el-table-column
            align="center"
            prop="type"
            :label="$t('o2oBrand.logo')"
            width="auto"
          >
            <template slot-scope="scope">
              <img
                :src="getImgSrc(scope.row.shopLogo)"
                :alt="scope.row.prodName"
                style="width: 60px; height: 60px"
                @error="handlePicError"
              />
            </template>
          </el-table-column> -->

          <!-- <el-table-column
            align="center"
            prop="shopAddress"
            :label="$t('o2oBrand.storeLocation')"
            width="auto"
          >
          </el-table-column> -->

          <el-table-column
            align="center"
            prop="brandName"
            :label="$t('o2oBrand.lessor')"
            width="auto"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.shopDetail.brandName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="shopAddress"
            :label="$t('o2oBrand.storeLocation')"
            width="auto"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.shopDetail.shopAddress }}
              </div>
            </template>
          </el-table-column>

          <!-- <el-table-column
            align="center"
            prop="shopStatusList"
            :label="$t('outlet.businStatus')"
            width="auto"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.shopStatus === 0" class="tag-text">{{
                $t("outlet.close")
              }}</span>
              <span v-else-if="scope.row.shopStatus === 1" class="tag-text">{{
                $t("outlet.normal")
              }}</span>
            </template>
          </el-table-column> -->
          <el-table-column
            prop="shopStatusList"
            :label="$t('shop.storeStatus')"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.auditStatus === 0"
                class="tag-text"
              >{{
                $t('product.pendingReview')
              }}</span>
              <span
                v-else-if="scope.row.auditStatus === 1"
                class="tag-text"
              >{{
                $t('productComm.pass')
              }}</span>
              <span
                v-else-if="scope.row.auditStatus === 2"
                class="tag-text"
              >{{
                $t('shopProcess.reject')
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            :label="$t('brand.applicationTime')"
          >
          </el-table-column>
          <el-table-column
            :label="$t('publics.operating')"
            width="150px"
          >
            <template slot-scope="scope">
              <div
                class="default-btn text-btn"
                v-if="isAuth('platform:station:outletAuditing') && scope.row.auditStatus == 0"
                @click="shopAuditHandle(scope.row)"
              >
                {{ $t("productComm.audit") }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        v-if="dataList.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>

    <el-dialog
      :visible.sync="isShowQR"
      :close-on-click-modal="false"
      class="qrDialogClass"
      title="二维码审核"
      width="500px"
    >

      <div class="shopTitle">
        门店名称：{{ '123' }}
      </div>
      <div style="position: absolute;top: 140px;">二维码样式：</div>
      <div style="display: flex;justify-content: center;">
        <qrSvgDisplay
          v-if="isShowQR"
          style="transform: scale(0.8);"
          :svgColor="rowData ? rowData.backgroundColor :''"
          :textSize="rowData ? rowData.titleFontSize: ''"
          :textColor="rowData ? rowData.titleFontColor : ''"
          :textContent="rowData ? rowData.titleContent : ''"
          desktopName="桌号"
          :deskCodeTextSize="rowData ? rowData.desktopFontSize :''"
          :deskCodeColor="rowData ? rowData.desktopFontColor : ''"
        ></qrSvgDisplay>

      </div>
      <div style="text-align: center;">
        <el-button
          size="small"
          style="width: 130px;margin-right: 50px;"
          type="primary"
          @click="openExamineDialog"
        >{{ $t("productComm.audit") }}</el-button>
        <el-button
          style="width: 130px;"
          size="small"
          @click="isShowQR = false"
        >取消</el-button>
      </div>

    </el-dialog>

    <el-dialog
      :visible.sync="showExamine"
      :close-on-click-modal="false"
      title="审核二维码"
    >
      <el-form
        ref="examineRef"
        :rules="examineRules"
        :model="examine"
      >
        <el-form-item
          prop="examineStatus"
          label="审核状态"
        >
          <el-radio-group
            @change="examineStatusChange"
            v-model="examine.examineStatus"
          >
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          prop="turnDownText"
          v-if="examine.examineStatus == 2"
          label="驳回理由"
        >
          <el-input
            v-model="examine.turnDownText"
            placeholder="请输入内容"
            type="textarea"
            :rows="2"
            style="width: 300px;"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button
          @click="submitAudit"
          type="primary"
        >确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import qrSvgDisplay from './qr-svg.vue'
export default {
  data() {
    const turnDownTextValidatePass = (rule, value, cb) => {
      console.log(cb);
      if (this.examine.examineStatus == 1 || (this.examine.examineStatus == 2 && this.examine.turnDownText)) {
        cb()
      } else {
        cb(new Error('请输入驳回原因'))
      }
    }
    return {
      // 图片前缀
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      theData: null, // 保存上次点击查询的请求条件
      theParams: null, // 保存上次点击查询的请求条件
      dataList: [], // 申请数据
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },
      // 搜索
      searchForm: {
        shopName: '', // 店铺名
        brandName: '',
        brandTagName: '',
        auditStatus: '',
        beginTime: '', // 开始时间
        endTime: '' // 结束时间
      },
      allBrandList: [],
      dateRange: [], // 申请时间
      dataListLoading: false, // 加载框
      dataListSelections: [],
      isShowQR: false,
      rowData: {
        backgroundColor: '',
        titleFontSize: '',
      },
      showExamine: false,
      examine: {
        examineStatus: 1,
        turnDownText: '',
      },
      examineRules: {
        examineStatus: [{ required: true, message: '请选择状态', trigger: 'blur' }],
        turnDownText: [{ validator: turnDownTextValidatePass, trigger: 'blur' }]
      }
    }
  },
  components: {
    qrSvgDisplay
  },
  props: {
    tabValue: {
      type: String,
      default: "",
    },
  },
  created() {
    this.getDataList();
    this.getAllBrandList();
  },
  mounted() { },
  methods: {
    changeDateRange(e) {
      if (e) {
        this.searchForm.beginTime = e[0];
        this.searchForm.endTime = e[1];
      } else {
        delete this.searchForm.beginTime;
        delete this.searchForm.endTime;
      }
    },
    changeAuditStatus() {
      console.log(this.searchForm.auditStatus);
      this.searchForm.auditingStatusList = [this.searchForm.auditStatus];
    },
    getAllBrandList() {
      this.$http({
        url: this.$http.adornUrl(`/platform/brandTag/choose-list`),
        method: "get",
      }).then((res) => {
        this.allBrandList = res.data;
      });
    },
    getDataList(page, newData = false) {
      page = page || this.page;
      if (newData || !this.theData) {
        this.theData = {
          current: page.currentPage,
          size: page.pageSize,
          status: 0,
        };
        this.theParams = JSON.parse(JSON.stringify(this.searchForm));
      } else {
        this.theData.current = page.currentPage;
        this.theData.size = page.pageSize;
      }
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/tzDesktopQrConfigAudit/page"),
        method: "get",
        params: this.$http.adornParams(
          Object.assign(this.theData, this.theParams, {
            sysType: 1,
          })
        ),
      }).then(({ data }) => {
        this.dataList = data.records;
        this.page.total = data.total;
        this.page.currentPage = data.current;
        this.dataListLoading = false;

        // let pageCont = document.getElementsByClassName('el-pager')[1].children
        // if (data.current !== 1) {
        //   pageCont[0].classList.remove('active')
        // }
      });
    },
    /**
     * 刷新回调
     */
    refreshChange() {
      this.getDataList(this.page);
    },
    // 清空自定义数据
    searchReset() {
      this.dateRange = [];
    },
    searchChange(newData = false) {
      this.page.currentPage = 1;
      this.getDataList(this.page, newData);
    },
    // 弹窗处理
    shopAuditHandle(row) {
      this.isShowQR = true
      this.rowData = row
      // this.$router.push({
      //   path: "/platform-outlet/auditOutlet-detail",
      //   query: { shopId: id, pageType: "toAudit" },
      // });
    },
    /**
     * 重置表单
     * @param {String} formName 表单名称
     */
    resetSearchForm(formName) {
      this.$refs[formName].resetFields();
      this.searchForm = {
        shopName: undefined,
        auditStatus: undefined,
        brandName: undefined,
        brandTagName: undefined,
      };
      this.dateRange = [];
    },

    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getDataList();
    },

    /**
     * 获取图片路径
     */
    getImgSrc(img) {
      if (!img) {
        return "";
      }
      if (img.indexOf("http://") === 0 || img.indexOf("https://") === 0) {
        return img;
      }
      console.log(this.resourcesUrl, img);

      return this.resourcesUrl + img;
    },
    /**
     * 当图片加载失败时，切换至默认图
     */
    handlePicError(event) {
      event.target.src = require("@/assets/img/shop-logo-def.png");
    },

    examineStatusChange(e) {
      console.log(e);
      this.examine.turnDownText = ''

    },

    submitAudit() {
      this.$refs.examineRef.validate(boo => {
        if (boo) {
          console.log(this.rowData);
          this.$http({
            url: this.$http.adornUrl("/tzDesktopQrConfigAudit"),
            method: "put",
            data: this.$http.adornParams({
              desktopQrConfigAuditId: this.rowData.desktopQrConfigAuditId,
              auditStatus: this.examine.examineStatus,
              reason: this.examine.turnDownText
            }),
          }).then(res => {
            console.log(res);
            if (res.code == '00000') {
              this.$message.success('提交成功')
              this.getDataList()
              this.showExamine = false
              this.examine.turnDownText = ''
              this.examine.examineStatus = 1
            }
          })
        }
      })
    },

    openExamineDialog() {
      this.isShowQR = false
      this.showExamine = true
    },
  },
}
</script>

<style lang="scss" scoped>
.qrDialogClass ::v-deep.el-dialog {
  margin-top: calc(50vh - 178px);
  width: 334px;
}

.qrDialogClass ::v-deep.el-dialog__body {
  height: 100%;
  padding: 20px;
}

// .qrDialogClass ::v-deep.el-dialog__header {
//   border: 0px;
//   padding: 0px;
// }
.qrDialogClass ::v-deep.el-dialog__close {
  font-size: 0px;
}
.shopTitle {
  height: 30px;
  line-height: 30px;
  background: rgb(230, 230, 230);
  padding-left: 10px;
}
</style>
